<template>
  <div class="line-part">
    <template v-if="type === 'horizontal'">
      <div class="itemH" v-for="(item, index) of detail" :key="index">
        <div class="itemH-name">{{ item.companyName }}</div>
        <div class="itemH-line">
          <div
            class="itemH-line-inner"
            :style="{
              background: lineColor,
              width: `${getWidth(item.companyCount)}%`,
            }"
          ></div>
        </div>
        <div class="itemH-count" :style="{ color: color }">
          {{ item.companyCount }}
        </div>
      </div>
    </template>
    <template v-if="type === 'vertical'">
      <div class="itemV" v-for="(item, index) of detail" :key="index">
        <div class="itemV-top">
          <span class="itemV-top-name">{{ item.companyName }}</span>
          <span class="itemV-top-count" :style="{ color: color }">{{
            item.companyCount
          }}</span>
        </div>
        <div class="itemV-line">
          <div
            class="itemV-line-inner"
            :style="{
              background: lineColor,
              width: `${getWidth(item.companyCount)}%`,
            }"
          ></div>
        </div>
      </div>
    </template>
  </div>
</template>
<script setup>
import { computed, ref } from 'vue'
const props = defineProps({
  type: {
    type: String,
    default: 'horizontal',
  },
  color: {
    type: String,
  },
  lineColor: {
    type: String,
  },
  detail: {
    type: Array,
    default: () => {
      return []
    },
  },
})
const max = computed(() => {
  let max = 0
  props.detail.forEach((item) => {
    if (Number(item.companyCount) > max) {
      max = Number(item.companyCount)
    }
  })
  return max
})
const getWidth = (data) => {
  const val = data || 0
  return (val / max.value) * 100
}
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
  display: none;
  // color: transparent;
  // background-color: transparent !important;
}
.line-part {
  width: 100%;
  height: 100%;
  // display: flex;
  // flex-direction: column;
  // align-items: center;
  // justify-content: space-between;
  overflow-y: auto;
  .itemH {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    &-name {
      width: 120px;
      text-align: right;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #666666;
      margin-right: 10px;
    }
    &-line {
      flex: 1;
      height: 8px;
      background: #e5e6f2;
      border-radius: 4px;
      &-inner {
        height: 100%;
        border-radius: 4px;
      }
    }
    &-count {
      width: 80px;
      text-align: right;
      font-size: 20px;
      font-family: Barlow Condensed;
      font-weight: 400;
      margin-left: 10px;
    }
  }
  .itemV {
    width: 100%;
    margin-bottom: 5px;
    &-top {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &-name {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #aaaaaa;
      }
      &-count {
        font-size: 18px;
        font-family: BarlowCondensed;
        font-weight: bold;
      }
    }
    &-line {
      width: 100%;
      height: 4px;
      background: #e5e6f2;
      border-radius: 2px;
      &-inner {
        height: 100%;
        border-radius: 2px;
      }
    }
  }
}
</style>
